<!DOCTYPE html>
<html lang="en">

<head>
  <title>three.js webgl - equirectangular video panorama</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <style>
    body {
      background-color: #000000;
      margin: 0px;
      overflow: hidden;
    }

    #info {
      position: absolute;
      top: 0px;
      width: 100%;
      color: #ffffff;
      padding: 5px;
      font-family: Monospace;
      font-size: 13px;
      font-weight: bold;
      text-align: center;
    }

    a {
      color: #ffffff;
    }

    #my-video {
      position: fixed;
      z-index: 99999;
      top: 0;
      left: 0;
    }
  </style>
  <link href="./lib/video-js.css" rel="stylesheet" />
</head>

<body>
  <div id="container"></div>
  <!-- 可以通过样式把video的控制层放到你想放的位置  或者 通过js自己去写一些控制方法 -->
  <video id="my-video" class="video-js" controls preload="auto" autoplay width="640" loop height="264"
    poster="MY_VIDEO_POSTER.jpg" data-setup="{}" crossorigin="anonymous">
    <!-- 直播源是网友提供的 如有侵权 麻烦告知 这就删除  如果播放视频 把这里换成全景视频的链接就行了 -->
    <source src="http://i3.vzan.cc/clip/85191/1038133875/E97998EBA355633F.m3u8" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider
      upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="./lib/video-js.js"></script>
  <script src="./lib/three.min.js"></script>

  <script>
    // videojs('#my-video', {
    //     controls: true,
    //     autoplay: true,
    //     preload: 'auto'
    // })
    var camera, scene, renderer

    var isUserInteracting = false,
      lon = 0,
      lat = 0,
      phi = 0,
      theta = 0,
      distance = 50,
      onPointerDownPointerX = 0,
      onPointerDownPointerY = 0,
      onPointerDownLon = 0,
      onPointerDownLat = 0

    init()
    animate()

    function init() {
      var container, mesh

      container = document.getElementById('container')

      camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        1,
        1100
      )
      camera.target = new THREE.Vector3(0, 0, 0)

      scene = new THREE.Scene()

      var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
      // invert the geometry on the x-axis so that all of the faces point inward
      geometry.scale(-1, 1, 1)

      // var video = document.createElement('video')
      // video.crossOrigin = '*'
      // video.width = 640
      // video.height = 360
      // video.loop = true
      // video.muted = true
      // video.src =
      //     'http://223.110.242.130:6610/gitv/live1/G_CCTV-1-HQ/1.m3u8'
      // video.setAttribute('webkit-playsinline', 'webkit-playsinline')
      // video.play()

      var texture = new THREE.VideoTexture(
        document.querySelector('#my-video')
      )
      var material = new THREE.MeshBasicMaterial({ map: texture })

      mesh = new THREE.Mesh(geometry, material)

      scene.add(mesh)

      renderer = new THREE.WebGLRenderer()
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)

      document.addEventListener(
        'mousedown',
        onDocumentMouseDown,
        false
      )
      document.addEventListener(
        'mousemove',
        onDocumentMouseMove,
        false
      )
      document.addEventListener('mouseup', onDocumentMouseUp, false)
      document.addEventListener('wheel', onDocumentMouseWheel, false)

      //

      window.addEventListener('resize', onWindowResize, false)
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()

      renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function onDocumentMouseDown(event) {
      event.preventDefault()

      isUserInteracting = true

      onPointerDownPointerX = event.clientX
      onPointerDownPointerY = event.clientY

      onPointerDownLon = lon
      onPointerDownLat = lat
    }

    function onDocumentMouseMove(event) {
      if (isUserInteracting === true) {
        lon =
          (onPointerDownPointerX - event.clientX) * 0.1 +
          onPointerDownLon
        lat =
          (event.clientY - onPointerDownPointerY) * 0.1 +
          onPointerDownLat
      }
    }

    function onDocumentMouseUp() {
      isUserInteracting = false
    }

    function onDocumentMouseWheel(event) {
      distance += event.deltaY * 0.05

      distance = THREE.Math.clamp(distance, 1, 50)
    }

    function animate() {
      requestAnimationFrame(animate)
      update()
    }

    function update() {
      lat = Math.max(-85, Math.min(85, lat))
      phi = THREE.Math.degToRad(90 - lat)
      theta = THREE.Math.degToRad(lon)

      camera.position.x = distance * Math.sin(phi) * Math.cos(theta)
      camera.position.y = distance * Math.cos(phi)
      camera.position.z = distance * Math.sin(phi) * Math.sin(theta)

      camera.lookAt(camera.target)

      renderer.render(scene, camera)
    }
  </script>
</body>

</html>